<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/header.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title title-color">各地实习学生分布情况查看</h1>
			<style>
				html,
				body {
					height: 100%;
					width: 100%;
				}
			</style>
		</header>

		<div class="mui-content">
			<div class="mui-content">
				<div class="chart" id="mapChart" style=""></div>
			</div>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/echarts-all.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript">
			mui.init();
            var chartDiv = document.getElementById("mapChart");
            chartDiv.style.width = document.body.offsetWidth + "px";
            chartDiv.style.height = document.body.offsetHeight - 50 + "px";
			
			var userinfo;
			mui.plusReady(function () {
				userinfo = app.getGlobalUserInfo();
			    loadE_provincesAndIa_counts(); 
			});
			
			/**
			 * 加载当前教师所带学生在各个省份的名称和实习人数
			 */
			function loadE_provincesAndIa_counts() {
				// 教师和管理员能看到的统计结果不一样，索引请求数据的接口不一样
				// 管理员能看到所有学生的实习统计信息，而教师只能看到自己所带学生的实习统计信息
				var dataUrl = "/user/teacher/loadE_provincesAndIa_countsByTeacher_id";
				if(userinfo.role_type == 1) {
					dataUrl = "/user/admin/loadE_provincesAndIa_counts";
				}
				mui.ajax(app.serverUrl + dataUrl,{
					data:{
						user_id: userinfo.user_id
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},	              
					success:function(data){
						if(data.status == 200) {
							var enterprises = data.data;
							// 格式化echarts数据
							var e_province_counts = [];
							for(var i = 0; i < enterprises.length; i++) {
								e_province_counts[i] = {};
								e_province_counts[i].name = enterprises[i].e_province;
								if(app.isNotNull(enterprises[i].ia_count)) {
									e_province_counts[i].value = enterprises[i].ia_count;
								} else {
									e_province_counts[i].value = 0;
								}
							}
							// 传入数据渲染图表
							renderChart(e_province_counts);
						} else {
							app.showToast(data.msg, "error");
						}
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			}
			
			function renderChart(e_province_counts) {
				var chartOption = {
					title : {
						text: '各地实习学生分布情况',
						// subtext: '纯属虚构',
						x:'center'
					},
					tooltip : {
						trigger: 'item',
						formatter: function (params) {
							return '城市：' + params.name + '<br>' +
								   '实习学生人数：'+ params.value;
						}
					},
					legend: {
						orient: 'vertical',
						x:'left',
						data:['统计']
					},
					dataRange: {
						x: 'left',
						y: 'bottom',
						splitList: [
							{start: 40},
							{start: 30, end: 40},
							{start: 20, end: 30},
							{start: 10, end: 20},
							{start: 5, end: 10},
							{end: 5}
						],
						color: ['#E0022B', '#E09107', '#A3E00B']
					},
					/* toolbox: {
						show: true,
						orient : 'vertical',
						x: 'right',
						y: 'center',
						feature : {
							mark : {show: true},
							dataView : {show: true, readOnly: false},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					roamController: {
						show: true,
						x: 'right',
						mapTypeControl: {
							'china': true
						}
					}, */
					series : [
						{
							name: '统计',
							type: 'map',
							mapType: 'china',
							roam: false,
							itemStyle:{
								normal:{
									label:{
										show:true,
										textStyle: {
										   // color: "rgb(249, 249, 249)"
										   color: "black"
										}
									}
								},
								emphasis:{label:{show:true}}
							},
							data: e_province_counts
							/* data:[
								{name: '北京',value: Math.round(Math.random()*50)},
								{name: '天津',value: Math.round(Math.random()*50)},
								{name: '上海',value: Math.round(Math.random()*50)},
								{name: '重庆',value: Math.round(Math.random()*50)},
								{name: '河北',value: Math.round(Math.random()*50)},
								{name: '河南',value: Math.round(Math.random()*50)},
								{name: '云南',value: Math.round(Math.random()*50)},
								{name: '辽宁',value: Math.round(Math.random()*50)},
								{name: '黑龙江',value: Math.round(Math.random()*50)},
								{name: '湖南',value: Math.round(Math.random()*50)},
								{name: '安徽',value: Math.round(Math.random()*50)},
								{name: '山东',value: Math.round(Math.random()*50)},
								{name: '新疆',value: Math.round(Math.random()*50)},
								{name: '江苏',value: Math.round(Math.random()*50)},
								{name: '浙江',value: Math.round(Math.random()*50)},
								{name: '江西',value: Math.round(Math.random()*50)},
								{name: '湖北',value: Math.round(Math.random()*50)},
								{name: '广西',value: Math.round(Math.random()*50)},
								{name: '甘肃',value: Math.round(Math.random()*50)},
								{name: '山西',value: Math.round(Math.random()*50)},
								{name: '内蒙古',value: Math.round(Math.random()*50)},
								{name: '陕西',value: Math.round(Math.random()*50)},
								{name: '吉林',value: Math.round(Math.random()*50)},
								{name: '福建',value: Math.round(Math.random()*50)},
								{name: '贵州',value: Math.round(Math.random()*50)},
								{name: '广东',value: Math.round(Math.random()*50)},
								{name: '青海',value: Math.round(Math.random()*50)},
								{name: '西藏',value: Math.round(Math.random()*50)},
								{name: '四川',value: Math.round(Math.random()*50)},
								{name: '宁夏',value: Math.round(Math.random()*50)},
								{name: '海南',value: Math.round(Math.random()*50)},
								{name: '台湾',value: Math.round(Math.random()*50)},
								{name: '香港',value: Math.round(Math.random()*50)},
								{name: '澳门',value: Math.round(Math.random()*50)}
							] */
						}
					]
				};
				
				var mapChart = echarts.init(chartDiv);
				mapChart.setOption(chartOption);
			}
			
		</script>
	</body>

</html>